@import "settings";
@import "foundation/components/grid.scss";
@import "foundation/components/inline-lists.scss";
@import "foundation/components/side-nav.scss";
@import "foundation/components/block-grid";

.archive-intro {
  @include grid-row();
  h1, p {
    @include grid-column($columns:12);
    @media #{$large-up} {
      @include grid-column($columns:10, $offset: 2);
    }
  }
}

#archive {

  .archive-month {
    @include grid-row();
    h3 {
      @include grid-column($columns:11, $offset: 1);
      @media #{$large-up} {
        @include grid-column($columns:10, $offset: 2);
      }
    }
  }

  .episode-archive-item {
    @include grid-row();

    .episode_number {
      @include grid-column($columns:1, $collapse: true);
      @media #{$large-up} {
        @include grid-column($columns:2, $collapse: true);
      }
    }

    .episode_title {
      @include grid-column($columns:11);
      @media #{$large-up} {
        @include grid-column($columns:10);
      }
    }
  }
}


// _article-listing - used for /episodes and /blog listings
section.screencast, section.article, section.transcript, section.announcement {
  .title-row {
    @include grid-row();
    .title {
      @include grid-column($columns:9);
      @media #{$medium-only} {
        @include grid-column($columns:10);
      }
      @media #{$large-up} {
        @include grid-column($columns:10, $push:2);
      }
    }
    .episode_number, .pubdate {
      @include grid-column($columns:3);
      @media #{$medium-only} {
        @include grid-column($columns:2);
      }
      @media #{$large-up} {
        @include grid-column($columns:2, $pull:10, $collapse: true);
      }
    }
  }

  .pubdate-row {
    @include grid-row();
    .article-categories, .video-run-time, .transcript-context {
      @include grid-column($columns:8);
      @media #{$large-up} {
        @include grid-column($columns:10, $push:2);
      }
    }
    .pubdate {
      @include grid-column($columns:4);
      @media #{$large-up} {
        @include grid-column($columns:2, $pull:10, $collapse: true);
      }
    }
  }

  .summary-row {
    @include grid-row();
    div.episode_summary {
      @include grid-column($columns:12);
      @media #{$medium-only} {
        max-width: 40rem;
      }
      @media #{$large-up} {
        @include grid-column($columns:8, $offset:2);
      }
    }
    div.enlarged {
      @media #{$medium-only} {
        max-width: 50rem;
      }
      @media #{$large-up} {
        @include grid-column($columns:10, $offset:2);
      }
    }
  }

  .video-row {
    @include grid-row();
    .downloads {
      @include grid-column($columns:12);
      @media #{$large-up} {
        @include grid-column($columns:2, $pull:10, $collapse: true);
      }
      .download-videos, .video-metadata {
        @include grid-column($columns:6);
        @media #{$large-up} {
          @include grid-column($columns:12);
        }
      }
    }
    .video-column {
      @include grid-column($columns:12);
      @media #{$large-up} {
        @include grid-column($columns:10, $push:2);
      }
    }

    @media #{$medium-only} {
      .downloads, .video-column {
        // 830px allows for 800px of video plus 15px left/right-padding
        max-width: 830px;
      }
    }
  }

  .content-row {
    @include grid-row();
    dl.accordion {
      @include grid-column($columns:12);
      @media #{$large-up} {
        @include grid-column($columns:10, $offset:2);
      }
    }
    #article_body {
      @include grid-column($columns:12, $collapse:true);
      @media #{$large-up} {
        @include grid-column($columns:10, $offset:2, $collapse:true);
      }
    }
  }

  #shownotes, #comments, #article_body {
    @include grid-row();
    & > * {
      @include grid-column($columns:12);
    }
    &>p, blockquote, ul {
      @media #{$medium-up} {
        @include grid-column($columns:10);
      }
    }
  }

  .transcript-row {
    @include grid-row();
    .transcript-body {
      @include grid-column($columns:12, $collapse:true);
      @media #{$large-up} {
        @include grid-column($columns:10, $offset:2, $collapse:true);
      }

      & > * {
        @include grid-column($columns:12);
      }
      &>p, blockquote, ul {
        @media #{$medium-up} {
          @include grid-column($columns:10);
        }
      }
    }
  }
}

// homepage - styling for "Latest {screencast,article}"
body.index {
  section.screencast, section.article {
    .title-row {
      @include grid-row();
      .title {
        @include grid-column($columns:10, $collapse:true);
        @media #{$large-up} {
          @include grid-column($columns:10, $push:0, $collapse:true);
        }
      }
      .episode_number, .pubdate {
        @include grid-column($columns:2, $collapse:true);
        @media #{$large-up} {
          @include grid-column($columns:2, $pull:0, $collapse:true);
        }
      }
    }

    .pubdate-row {
      @include grid-row();
      .article-categories, .video-run-time {
        @include grid-column($columns:9, $collapse:true);
        @media #{$large-up} {
          @include grid-column($columns:9, $push:0, $collapse:true);
        }
      }
      .pubdate {
        @include grid-column($columns:3, $collapse:true);
        @media #{$large-up} {
          @include grid-column($columns:3, $pull:0, $collapse:true);
        }
      }
    }

    .summary-row {
      @include grid-row();
      div {
        @include grid-column($columns:12, $collapse:true);
        @media #{$large-up} {
          @include grid-column($columns:12, $offset:0, $collapse:true);
        }
      }
    }

  }
}

// Other sections on the homepage
.latest-content, .why-am-i-here {
  @include grid-row();
  .latest-screencast, .strapline {
    @include grid-column($columns:12);
    @media #{$large-up} {
      @include grid-column($columns:6);
    }
  }
  .latest-article, .explore-the-archives {
    @include grid-column($columns:12);
    @media #{$medium-only} {
      max-width: 40rem;
    }
    @media #{$large-up} {
      @include grid-column($columns:5, $offset:1);
    }
  }
}

// level-up your vim
// appears on homepage and beneath related content
.pro-content {
  @include grid-row();
  .level-up, h3 { @include grid-column($columns:12); }
  .training {
    @include grid-column($columns:12);
    @media #{$medium-only} {
      @include grid-column($columns:8);
    }
    @media #{$large-up} {
      @include grid-column($columns:6);
    }
  }
  .training-testimonial {
    @include grid-column($columns:12);
    @media #{$medium-only} {
      @include grid-column($columns:10, $offset:1);
    }
    @media #{$large-up} {
      @include grid-column($columns:5, $offset:1);
    }
  }
  .publications, .pro-screencasts {
    @include grid-column($columns:12);
    @media #{$medium-only} {
      @include grid-column($columns:8);
    }
    @media #{$large-up} {
      @include grid-column($columns:6);
    }
  }
  .publications-image, .pro-screencasts-image {
    @include grid-column($columns:12);
    @media #{$medium-only} {
      @include grid-column($columns:4);
    }
    @media #{$large-up} {
      @include grid-column($columns:5, $offset:1);
    }
  }
}


.share-container {
  @include grid-row();
  .call-to-action {
    @include grid-column($columns:12);
    @media #{$large-up} {
      @include grid-column($columns:10, $offset:2);
    }
  }
  .buttons {
    @include grid-column($columns:12);
    @media #{$large-up} {
      @include grid-column($columns:10, $offset:2);
    }
  }
}

.downloads-list {
  @media #{$small-only} {
    @include inline-list;
  }
  @media #{$medium-only} {
    @include inline-list;
  }
  @media #{$large-up} {
    @include side-nav();
  }
}

.category-aggregate-title {
  @include grid-row();
  h2, h3, h4 {
    @include grid-column($columns:12);
    @media #{$large-up} {
      @include grid-column($columns:10, $offset:2);
    }
  }
}

ul.category-list {
  @include block-grid($per-row:2);
  @media #{$medium-up} {
    @include block-grid($per-row:3);
  }
}

.about-text {
  @include grid-row();
  h1,h2,h3 {
    @include grid-column($columns:12);
    @media #{$large-up} {
      @include grid-column($columns:10, $offset:2);
    }
  }
  p {
    @include grid-column($columns:12);
    @media #{$medium-only} {
      max-width: 40rem;
    }
    @media #{$large-up} {
      @include grid-column($columns:8, $offset:2);
    }
  }
}

.about-mugshot {
  @include grid-row();
  img { @include grid-column($columns:12, $collapse:true); }
  h3 {
    @include grid-column($columns:12);
    @media #{$medium-up} {
      @include grid-column($columns:8);
    }
  }
  p {
    @include grid-column($columns:12);
    @media #{$medium-up} {
      @include grid-column($columns:4);
    }
  }
}

// Subscribe page
body.subscribe {
  .header, .section {
    @include grid-row();
    &>div {
      @include grid-column($columns:12);
      @media #{$medium-only} {
        max-width: 40rem;
      }
      @media #{$large-up} {
        @include grid-column($columns:8, $offset:2);
      }
    }
  }
}
#mc_embed_signup {
  @include grid-row();
  .mc-field-group, .clear {
    @include grid-column($columns:12);
  }
  .fname-field, .lname-field {
    @media #{$medium-only} {
      max-width: 40rem;
    }
    @media #{$medium-up} {
      @include grid-column($columns:6);
    }
  }
}

// /training landing page
.training-header {
  @include grid-row();
  .strapline {
    @include grid-column($columns:12);
  }
}

.training-signpost {
  @include grid-row();
  .private-class, .core-vim-class, .core-vim-course {
    @include grid-column($columns:12);
    @media #{$medium-only} {
      max-width: 40rem;
    }
    @media #{$large-up} {
      @include grid-column($columns:6);
    }
  }
  .testimonial {
    @include grid-column($columns:10, $offset:1);
    @media #{$medium-only} {
      max-width: 40rem;
    }
    @media #{$large-up} {
      @include grid-column($columns:5, $offset:1);
    }
  }
}

// /publications
.publication {
  @include grid-row();
  .title, .description, .publications-image {
    @include grid-column($columns:12);
  }
  .description {
    @media #{$large-up} {
      @include grid-column($columns:6);
    }
  }
  .publications-image {
    @media #{$large-up} {
      @include grid-column($columns:5, $offset:1);
    }
  }
}

// logo and strapline
.identity-row {
  @include grid-row();
  .logo {
    @include grid-column($columns:4);
  }
  .strapline {
    @include grid-column($columns:12);
    @media #{$medium-up} {
      @include grid-column($columns:7,$offset:1);
    }
  }
}
 

.training-leadtext {
  @include grid-row();
}
.standout {
  @include grid-row();
  .testimonial {
    @include  grid-column($columns:12);
    @media #{$medium-up} {
      @include  grid-column($columns:8, $offset:2);
    }
  }
}
